'use strict';
import React, { Component } from 'react';
import {
    View,
    Text,
    StyleSheet,
    Image,
    ListView,
    RefreshControl,
    ActivityIndicator,
    TouchableOpacity,
    Dimensions,
    Platform,
    Animated,
    TouchableHighlight,
    AsyncStorage,
    Alert,
    NativeModules
} from 'react-native';

import { connect } from 'react-redux';

import NavTitle from './NavTitle';
import BindUser from '../page/personal/BindUser';
import PersonalInfo from '../page/personal/PersonalInfo';
import RealEstateInfo from '../page/problem/RealEstateInfo';
import CommunityInfo from '../page/problem/CommunityInfo';

var windowWidth = Dimensions.get('window').width;
var circleHeight = Dimensions.get('window').height*0.66;
var circleRadius = (windowWidth-80)/2;

var dotArray = [];
for(var i = 0;i < 100; i++){
    dotArray.push(i);
}

function gen32LenStr() {//生成唯一key值
    var guid = "";
    for (var i = 1; i <= 32; i++) {
        var n = Math.floor(Math.random() * 16.0).toString(16);
        guid += n;
        if (i == 20) {
            guid += "";
        }
    }
    return guid;
}

class ImageSelect extends Component {
    constructor(props){
        super(props);
        this.state={

        };
    }

    componentDidMount() {

    }


    _showImage(index){
        //alert(JSON.stringify(this.state.showBigImg));
        this.setState({
            showImage:true,
            ShowIndex:index
        });
    }

    _renderImage(){
        var _temp = [];
        this.state.avatarSource.map((ele, index) => {
            _temp.push(
                <TouchableOpacity
                    key = {index}
                    onPress={() => this._showImage(index)}>
                    <Image style={[styles.showImage,{marginRight:(this.state.avatarSource.indexOf(ele)+1) %3 == 0 ? 0:10}]} source={ele}/>
                    <TouchableHighlight
                        style={styles.remove}
                        underlayColor='#c8c7cc'
                        onPress={() => this._removeImg(index)}>
                        <Text style={{fontSize:12,color:'#fff'}}>X</Text>
                    </TouchableHighlight>
                </TouchableOpacity>
            );
        });
        return _temp;
    }

    _removeImg(index) {
        this.state.avatarSource.splice(index, 1);
        this.state.showBigImg.splice(index, 1);
        this.setState({
            num: this.state.num + 1
        });
    }

    _selectImage(){
        let options = {
            title: '',
            cancelButtonTitle:'取消',
            takePhotoButtonTitle:'拍照',
            chooseFromLibraryButtonTitle:'相册选择',
            mediaType:'photo',
            quality: 0.5
        };
        ImagePicker.showImagePicker(options, (response) => {
            if (response.didCancel) {

            }
            else if (response.error) {

            }
            else if (response.customButton) {

            }
            else {
                // You can display the image using either data:
                //const source = {uri: 'data:image/jpeg;base64,' + response.data, isStatic: true};
                let source = null;

                if(AppInfo.appIsIOS()) {
                    // uri (on iOS)
                    source = {uri: response.uri.replace('file://', ''), isStatic: true};
                } else {
                    // uri (on android)
                    source = {uri: response.uri, isStatic: true};
                }

                this.setState({
                    avatarSource: [...this.state.avatarSource, source],
                    showBigImg: []
                });

                this.state.avatarSource.map((ele, index) => {
                    this.setState({
                        showBigImg: [...this.state.showBigImg, ele.uri],
                        num: this.state.num + 1
                    });
                });
            }
        });
    }

    render(){

        return(
            <View>
                {this._renderImage()}
                <TouchableOpacity
                    style={{marginTop:this.state.avatarSource.length > 2?10:0}}
                    onPress={this._selectImage.bind(this)}>
                    <View style={styles.addBtn}>
                        <Image source={require('../../../imgs/icPictureGray.png')}/>
                        <Text style={styles.addText}>点击添加图片</Text>
                    </View>
                </TouchableOpacity>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flexDirection: 'column',
        backgroundColor: '#F5F5F5',
        flex: 1,
    },
    topImage:{
        height:circleHeight,
        flexDirection:'column',
        width: windowWidth
    },
    topHead:{
        position:'relative',
        height:circleHeight/1.66
    },
    circleCcore:{
        position:'absolute',
        top:circleHeight/3,
        left:Dimensions.get('window').width/2,
        width:windowWidth-120,
        height:windowWidth-120,
        marginLeft:-(windowWidth-120)/2,
        marginTop:-(windowWidth-120)/2,
        alignItems:'center',
        justifyContent:'center',
        backgroundColor:'rgba(0,0,0,0)',
    },
    circleText:{
        fontSize:86,
        color:'#FFF'
    },
    scoreDot:{
        position:'absolute',
        top:circleHeight/3,
        left:Dimensions.get('window').width/2,
        width:10,
        height:2,
        marginLeft:-5,
        backgroundColor:'#FFF',
        borderRadius:1
    },
    scoreHideDot:{
        position:'absolute',
        top:circleHeight/3,
        left:Dimensions.get('window').width/2,
        width:10,
        height:2,
        marginLeft:-5,
        backgroundColor:'rgba(255,255,255,.2)',
        borderRadius:1
    },
    textStatus:{
        flex:1,
        marginTop:10,
        backgroundColor:'rgba(0,0,0,0)',
        alignItems:'center',
        justifyContent:'center',
    },
    buttonStatus:{
        flex:1,
        marginTop:10,
        backgroundColor:'rgba(0,0,0,0)',
        flexDirection: 'row',
        alignItems:'center',
        justifyContent:'center',
    },
    statusText:{
        justifyContent:'center',
        alignSelf:'center',
        fontSize:18,
        color:'#FFF'
    }
});

export default ImageSelect;
